<style lang="less" scoped>
.booking-con {
  background: #fff;
  .booking-list {
    padding: 0.08rem 0.15rem 0.1rem;
    border-bottom: 0.005rem solid #ddd;
    .am-flexbox {
      time {
        font-size: 0.18rem;
      }
      span.people {
        margin-left: 0.05rem;
        color: #888;
      }
      .am-ft-right {
        width: 40%;
        span {
          float: left;
          display: block;
          color: #fb6165;
          margin-left: 0.1rem;
          font-size: 0.21rem;
        }
      }
    }
    .list-member {
      margin-top: 0.15rem;
      padding: 0.1rem;
      padding-bottom: 0;
      position: relative;
      background-color: #f8f8f8;
      border-radius: 0.03rem;
      em.arrow {
        position: absolute;
        top: -0.08rem;
        left: 0.2rem;
        z-index: 1;
        width: 0;
        height: 0;
        border-left: 0.08rem solid transparent;
        border-right: 0.08rem solid transparent;
        border-bottom: 0.08rem solid #f8f8f8;
      }
      span {
        float: left;
        display: block;
        margin: 0 0.07rem 0.1rem 0;
        width: 0.2rem;
        height: 0.2rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        background-image: url('../../assets/images/def.png');
        &.lady {
          background-image: url('../../assets/images/lady.png');
        }
        &.male {
          background-image: url('../../assets/images/male.png');
        }
      }
    }
    .ady-box {
      height: 0.16rem;
      line-height: 0.16rem;
      font-size: 0.12rem;
      display: flex;
      width:90%;
      margin-top: 0.02rem;
      border: 0.01rem solid #fb6165;
      border-radius: 0.1rem;
      .ongoing {
        border-radius: 0.1rem;
        width: 35%;
        text-align: center;
        background-color: #fb6165;
        color: #fff;
      }
      .leave {
        width: 65%;
        text-align: center;
        b {
          font-weight: normal;
          color: #fb6165;
        }
      }
    }
    .am-button:not([am-version]).tiny-orange {
      width: 0.56rem;
      height: 0.29rem;
      line-height: 0.29rem;
      font-size: 0.13rem;
      background-clip: padding-box;
      box-sizing: border-box;
      border-radius: 0.03rem;
      &.disabled {
        color: #bbb;
        background-color: #ddd;
        border-color: #ddd;
      }
    }
  }
}
</style>

<template>
  <div class="booking-con">
    <div class="booking-list" v-for="item in goodsList" :key="item.id">
      <div class="am-flexbox">
        <div class="am-flexbox-item">
          <div>
            <time>{{item.time}}</time>
            <span class="people">[{{item.peoples[0]}}-{{item.peoples[1]}}人场]</span>
          </div>
          <span class="ady-box">
            <span class="ongoing">拼场中</span>
            <span class="leave">还差
              <b>{{item.paid.total}}</b>&nbsp;人可开场</span>
          </span>
        </div>
        <div class="am-ft-right">
          <span>￥{{item.price}}</span>
          <button v-if="item.peoples[1] == item.paid.lady + item.paid.male" disabled="disabled" class="am-button tiny-orange disabled">已订满</button>
          <button v-else @click="linkBooking()" class="am-button tiny-orange">预定</button>
        </div>
      </div>
      <div class="list-member fn-clear">
        <em class="arrow"></em>
        <span v-for="(o,index) in item.payList" :class="o.className"></span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['goods'],
  data() {
    return {};
  },
  computed: {
    goodsList() {
      this.goods.forEach(element => {
        let len = element.peoples[1];
        element.payList = [];
        for (let i = 0; i < len; i++) {
          let obj = {};
          if (i < element.paid.lady) {
            obj.className = 'lady';
          } else if (i < element.paid.lady + element.paid.male) {
            obj.className = 'male';
          }
          element.payList.push(obj);
        }
        element.paid.total = len - element.paid.lady - element.paid.male;
      });
      return this.goods;
    }
  },
  methods: {
    linkBooking() {
      let userId = 123;
      this.$router.push({ path: `/booking/${userId}` });
    }
  }
};
</script>
